
<template>
  <!------------------------------------ 采购中心商品规格 ------------------------------------
    @desc 规格
    @author kyle
    @date 2021-04-13
    @props
      model     ———— 商品详情数据
  -->
  <div class="mlr-20">
    <!-- 多规格 -->
    <van-form ref="subForm">
      <div v-if="model.Skus&&model.Skus.length>1" class="mt-20 bg-ef br-12">
        <div class="ptb-20 ">
          <p class="checkbox" :class="samePrice?'checked':''" @click="toggle">统一所有规格售价</p>
        </div>
        <div class=" bg-white br-12 mb-60 pl-20">
          <div class="flex-v-c  ptb-22">
            <div class="width-33 pl-10">规格</div>
            <div class="width-33 pl-10">库存({{ model.DefaultUnit }})</div>
            <div class="width-33 pl-10">售价</div>
          </div>
          <div v-for="(item,index) in model.Skus" :key="index" class="flex-v-c pb-32 color-black">
            <div class="width-33 pl-10 text-show-line-2 pr-20">{{ item.DispalyAttribute }}</div>
            <div class="width-33 pr-20">
              <van-field
                v-model="item.Stock"
                name="库存"
                label=""
                placeholder="输入库存"
                type="number"
                :rules="[{ required: true, message: ' ' }]"
                @input="changeStock"
              />
            </div>
            <div class="width-33 pr-20 color-primary">
              <van-field
                v-model="item.Price"
                name="价格"
                label=""
                placeholder="输入价格"
                type="number"
                :rules="[{ required: true, message: ' ' }]"
                @input="changePrice(item.Price)"
              />
            </div>
          </div>

        </div>
      </div>
      <!-- 单规格 -->
      <div v-if="model.Skus&&model.Skus.length===1" class="mt-20">
        <div class=" bg-white br-12 mb-60 pl-20">
          <div class="flex-v-c  ptb-22">
            <div class="width-50 pl-10">库存</div>
            <div class="width-50 pl-10">售价</div>
          </div>
          <div v-for="(item,index) in model.Skus" :key="index" class="flex-v-c pb-32 color-black">
            <div class="width-50 pr-20">
              <van-field
                v-model="item.Stock"
                type="number"
                name="库存"
                label=""
                placeholder="输入库存"
                :rules="[{ required: true, message: ' ' }]"
                @input="changeStock"
              />
            </div>
            <div class="width-50 pr-20 color-primary">
              <van-field
                v-model="item.Price"
                type="number"
                name="价格"
                label=""
                placeholder="输入价格"
                :rules="[{ required: true, message: ' ' }]"
                @input="changePrice(item)"
              />
            </div>
          </div>

        </div>
      </div>
    </van-form>
  </div>
</template>

<script>

export default {
  name: 'PurchaseShareSpec',
  components: {
  },
  props: {
    model: { // 数据
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      samePrice: false,
      price: 0,
      oldSkus: [],
      oldMinPrice: 0,
      oldMaxPrice: 0
    }
  },
  mounted() {

  },
  methods: {
    // 保留旧skus,最低价和最高价
    setOldVal() {
      if (this.model.Skus) {
        this.oldSkus = JSON.parse(JSON.stringify(this.model.Skus))
        this.oldMinPrice = this.model.MinPrice
        this.oldMaxPrice = this.model.MaxPrice
      }
    },
    // 恢复旧skus,最低价和最高价
    getOldVal() {
      this.model.MinPrice = this.oldMinPrice
      this.model.MaxPrice = this.oldMaxPrice
      this.model.Skus = this.oldSkus
    },

    // 统一价格
    setSamePrice(price) {
      if (this.model.Skus && this.model.Skus.length > 0) {
        this.model.Skus.forEach(item => {
          item.Price = price
        })
        this.model.MinPrice = price
        this.model.MaxPrice = price
      }
    },

    // 计算最高价和最低价
    setExtrePrice(price) {
      const priceList = []
      this.model.Skus.forEach(item => {
        if (item.Price) {
          priceList.push(Number(item.Price))
        }
      })

      this.model.MinPrice = Math.min(...priceList)
      this.model.MaxPrice = Math.max(...priceList)
    },

    // 价格统一切换按钮
    toggle() {
      this.samePrice = !this.samePrice
      if (this.samePrice) {
        this.setOldVal()
        if (this.model.Skus && this.model.Skus.length > 0) {
          const _price = this.model.Skus[0].Price
          this.setSamePrice(_price)
        }
      } else {
        this.getOldVal()
      }
    },
    changePrice(item) {
      if (!this.model.initPrice) {
        item.Price = item.Price || '0'
        const lastStr = item.Price.substr(item.Price.length - 1, 1)
        if (lastStr !== '.') {
          item.Price = parseFloat(item.Price)
        }
        const price = item.Price
        if (this.samePrice) {
          this.setSamePrice(price)
        } else {
          this.setExtrePrice(price)
        }
      } else {
        if (this.model.Skus.length > this.model.initPriceNum) {
          this.model.initPriceNum++
        } else {
          this.model.initPrice = !this.model.initPrice
        }
      }
    },
    changeStock() {
      if (!this.model.initStock) {
        this.model.Stock = 0
        if (this.model.Skus && this.model.Skus.length > 0) {
          this.model.Skus.forEach(item => {
            item.Stock = item.Stock || 0
            item.Stock = parseInt(item.Stock)
            this.model.Stock += Number(item.Stock)
          })
        }
      } else {
        if (this.model.Skus.length > this.model.initStockNum) {
          this.model.initStockNum++
        } else {
          this.model.initStock = !this.model.initStock
        }
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.icon-box{
  width: 32px;
  height: 32px;
  border-radius: 100%;
}
.width-33{
  width: 33.33%;
  flex-shrink: 0;
}
.width-50 {
  width: 50%;
  flex-shrink: 0;
}
.van-cell{
  padding-left:7.5px;
  line-height: 1;
  font-size: 12px;
  background: #f7f7f7;
  color: currentColor;
  /deep/.van-cell__value,/deep/.van-field__bod,/deep/.van-field__control{
    color: currentColor;
    font-size: 16px;
    font-weight: bold;
  }
  /deep/input::-webkit-input-placeholder{
    font-weight: 500;
    font-size: 13px;
  }
  /deep/input::-moz-placeholder{
    font-weight: 500;
    font-size: 13px;
  }
  /deep/input:-moz-placeholder{
    font-weight: 500;
    font-size: 13px;
  }
  /deep/input::-ms-input-placeholder{
    font-weight: 500;
    font-size: 13px;
  }
}
.checkbox{
 text-align: right;
 padding-right: 65px;
 &:before{
   right: 20px;
 }
 &:after{
   right: 32px;
 }
}
</style>
